<template>
  <div>
      <h1 style="text-align:center;">商品添加</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
             <el-form-item label="商品价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
             <el-form-item label="商品图片">
              <!-- 图片上传需要路径  需要有值 name="dishimg"-->
               <el-upload
                    class="upload-demo"
                    action="/admin/api/uploads"
                    :show-file-list="false"
                    accept=".jpg,.png,.webp,.jpeg,.gif"
                    name="dishimg"
                    :on-success="successUpload"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <!-- 展示一张图片 给一个图片路径 -->
                <!-- 判断一下有无图片 没有就显示默认的 -->
                <img v-show="form.imgpath === '' " src="../../assets/wu.jpg"  width="100" height="100" alt="">
                <img v-show="form.imgpath != '' " width="100" height="100"  :src="'/admin/' + form.imgpath" alt="">
            </el-form-item>
            <!-- 规格需要遍历 -->
            <el-form-item label="商品规格">
              <div class="specs" v-for="(spec, index) in specs" :key="spec.id">
                 <el-input  v-model="spec.value"></el-input>
                 <!-- 按钮添加点击事件 -->
                  <el-button @click="addspec" v-if="index === specs.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                  <!-- 大于二显示 -->
                   <el-button @click="reducespec" v-if="index === specs.length - 1 && specs.length > 2" type="primary" icon="el-icon-remove-outline" circle ></el-button>
              </div>
            </el-form-item>
             <!-- 规格需要遍历 -->
            <el-form-item label="商品类别">
              <div class="specs" v-for="(kind, index) in kinds" :key="kind.id">
                 <el-input  v-model="kind.value"></el-input>
                 <!-- 按钮添加点击事件 -->
                  <el-button @click="addkind" v-if="index === kinds.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                  <!-- 大于二显示 -->
                   <el-button @click="reducekind" v-if="index === kinds.length - 1 && kinds.length > 2" type="primary" icon="el-icon-remove-outline" circle ></el-button>
              </div>
            </el-form-item>
              <!-- enable -->
            <el-form-item label="是否展示">
              <el-switch
                v-model="form.enable"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <!-- 商品分类  下拉框 请求回来所有分类-->
            <el-form-item label="商品分类">
                <el-select v-model="form.catname" placeholder="请选择商品分类">
                  <!-- <el-option value="0">请选择分类</el-option> -->
                  <el-option
                      v-for="item in cats"
                      :key="item._id"
                      :label="item.catname"
                      :value="item.catname">
                  </el-option>
                </el-select>
            </el-form-item>
            <!-- 多行文本  用富文本编辑器-->
            <el-form-item label="商品详情">
                <!-- bidirectional data binding（双向数据绑定） -->
                  <quill-editor v-model="form.detail"
                      :options="editorOption"
                  >
                  </quill-editor>
            </el-form-item>
             <el-form-item>
              <!-- 给新增按钮绑定事件 点击按钮获取this.form.detail -->
               <el-button @click="onSubmit" type="primary">新增</el-button>
            </el-form-item>
      </el-form>   
  </div>
</template>

<script>
//导入请求回来的所有分类 商品添加
import {CatList,DishAdd} from '@/request'
// 导入富文本编辑器 用了一个组件   Quill 可以修饰样式 进行修改
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      editorOption: {
          // some quill options
        },
          cats: [],
          form: {
            name: '',
            price: '',
            imgpath: '',
            enable: false,
            detail: '',
            catname: ''
          },
          //规格
          specs:[
            {
              id: 1,
              value: ''
            },
             {
              id: 2,
              value: ''
            },
          ],
          //类别
          kinds:[
            {
              id: 1,
              value: ''
            },
             {
              id: 2,
              value: ''
            },
          ]
      }
    },
  methods: {
    async onSubmit() {
      let specifications = this.specs.map(item => item.value).join('=====')
        this.form.specifications = specifications
        let kind = this.kinds.map(item => item.value).join('=====')
        this.form.kind = kind
      // 获取到内容可以发请求
      console.log(this.form);
      let data = await DishAdd(this.form)

      console.log(data);
      //添加成功给用户提示  
           let {error_code,msg} = data
           if(error_code === 200){
              this.$message({
                type: 'success',
                duration: 1500,
                message: msg,
                // 提示关闭之后跳转到列表页
                onClose:()=>{
                    this.$router.push('/dish/list')
                }
              })
              //失败提示
           }else{
             this.$message({
                type: 'error',
                duration: 1500,
                message: msg,
              })
           }
      
    },
    addspec(){
      this.specs.push({
        id: this.specs.length + 1,
        value:''
      })
    },
    // 删除最后一个
     reducespec(){
      this.specs.pop()
    },
    addkind(){
      this.kinds.push({
        id: this.kinds.length + 1,
        value:''
      })
    },
    // 删除最后一个
     reducekind(){
      this.kinds.pop()
    },
    // 文件上传时的钩子
      successUpload(response, file, fileList) {
        // console.log(response,file, fileList);
        // 请求回来的图片
        this.form.imgpath = response.data.filepath
      },
      //请求回来的所有商品分类
     async getCatList() {
       let data = await CatList()
       this.cats = data.data.catlist
      }
    },
    created() {
      //调用方法
      this.getCatList()
    }
    
}
</script>

<style lang="scss" scoped>
    .specs{
      display: flex;
      .el-button.is-circle{
         padding: 0;
      }
      .el-button{
        font-size: 35px;
      }
      .el-input{
        width: 90%;
      }
    }
    .quill-editor{
      width: 800px;
      height: 300px;
      background-color: cornsilk;
    }
</style>
  